import React, { Component } from 'react';
import {inject,observer} from 'mobx-react';

@inject('todo')
@observer
class AddTodo extends Component {
  addTodo(event){
    const {todoAdd} = this.props.todo
    // 添加任务
    if(event.key === 'Enter'){
      // 获取用户输入的内容
      const taskName = event.target.value
      // 判断用户是否输入了内容
      if(taskName.trim().length === 0){
        return
      }
      todoAdd(taskName)
      // 清空文本框
      event.target.value = ''
    }
  }
  render() {
    return (
      <header className="header">
        <h1>todos</h1>
        <input
          className="new-todo"
          placeholder="What needs to be done?"
          onKeyUp={this.addTodo.bind(this)}
        />
      </header>
    )
  }
}

export default AddTodo